<template>
   <div class="research">
       <el-row :gutter="10" class="checktitle">
          <el-col :span="16">
              <div class="researchleft">
                  <div class="researchleft1">
                       <el-carousel height="359px" indicator-position='none'>
                          <el-carousel-item v-for="(item,index) in newslist4" :key="index">
                              <nuxt-link target="_blank" :to="'/post/' + item.pid">
                            <div class="newsdetailtitle">
                              <img :src="item.thumbnail" alt="">
                              <div class="info">
                                <span>{{item.name}}</span>
                              </div>
                            </div>
                             </nuxt-link>
                          </el-carousel-item>
                        </el-carousel>
                  </div>
                  <div class="researchleft2">
                       <div class="msg">
                            <div class="msg1">
                              <h1>上海股权研究院</h1>
                              <h2>微信号：shgqyjy</h2>
                              <h2>关注微信号，了解每日金融新闻</h2>                              
                            </div>
                            <img src="http://img3.tqcaifu.com/list/reseach2.png" alt="">
                       </div>
                  </div>
                  <research1 title="投资策略" :research1link="research1link" :newslist="touzicelue"></research1>                  
              </div>
          </el-col>
           <el-col :span="8">
              <div>
                  <contactus1></contactus1>
                  <research2 :newdata="zuire"></research2>
              </div>
          </el-col>
       </el-row>
       <newsdetail :newinfo="newsdetail" :newslist1="newslist1" :newslist2="newslist2" :newslist3="newslist3"></newsdetail>
  </div>
</template>


<script>
import asyncApi from '../../static/js/asyncApi.js'
import contactus1 from "../../components/contactus1";
import research1 from "../../components/research1";
import research2 from "../../components/research2";
import newsdetail from "../../components/newsdetail";


export default {
    components:{
        contactus1,
        research1,
        research2,
        newsdetail
    },
  data() {
    return {
      activeName2: "first",
      newsdetail:{
        title1:"股权研究",
        title2:"信托研究",
        title3:"基金研究",
        title11:"/column/simuguquan",
        title22:"/column/xintuoziguan",
        title33:"/column/qiyuezijin",
        minititle1:"",
        minititle2:"",
        minititle3:"",
        type:1
      },
      research1link:"/column/touzicelue"
    };
  },
  methods: {
    handleClick(tab, event) {
    }
  },
  //readNum
  async asyncData () {
    let [data1,data2,data3,data4,data5,data6] = await Promise.all([
       asyncApi.asyncGetCategoryPost({categoryName:"投资策略",page:"1",pageSize:"4",orderBy:"createtime",orderByType:"desc"}),
       asyncApi.asyncGetCategoryPost({page:"1",pageSize:"8",orderBy:"createtime",orderByType:"desc"}),    
        asyncApi.asyncGetCategoryPost({categoryName:"私募股权",page:"1",pageSize:"5",orderBy:"createtime",orderByType:"desc"}),
        asyncApi.asyncGetCategoryPost({categoryName:"信托资管",page:"1",pageSize:"5",orderBy:"createtime",orderByType:"desc"}),
        asyncApi.asyncGetCategoryPost({categoryName:"契约基金",page:"1",pageSize:"5",orderBy:"createtime",orderByType:"desc"}),
       asyncApi.asyncGetCategoryPost({categoryName:"天沁投研",page:"1",pageSize:"4",orderBy:"createtime",orderByType:"desc"}),
    ])
    return {
      touzicelue: data1.data.data.list,
      zuire: data2.data.data.list,
      newslist1:data3.data.data.list,
      newslist2:data4.data.data.list,
      newslist3:data5.data.data.list,
      newslist4:data6.data.data.list,
    }
 },
 head () {
    return {
      title: "投研报告_金融投研_投研资讯-天沁财富",
      meta: [
         { hid:"keywords",name: 'keywords', content: '投研报告，金融投研，投研资讯' },
         { hid:"description",name: 'description', content: '投研报告以最权威的技能投研分析为基础，为投资者提供真实可靠的投资咨询，金融经济投研报告。' }
      ]
    }
  }
};
</script>

<style scoped>
.newsdetailtitle{
  height: 100%;
  width: 100%;
  position: relative;
}
.newsdetailtitle img{
  height: 100%;
  width: 100%;
}
.newsdetailtitle .info{
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 100%;
}
.newsdetailtitle .info span{
  height: 50px;
  padding: 0 30px;
  display: inline-block;
  line-height: 50px;
  background: rgba(0,0,0, 0.5);
   background: -webkit-linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
        background: -o-linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
        background: -moz-linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
        background: -mos-linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
        background: linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.5));  
  color: white;
  font-size: 20px;
  width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.research{
  width: 1200px;
  margin: 10px auto;
}
.researchleft1 img{
  width: 100%;
  height: 100%;
}
.researchleft2{
  margin-top: 10px;
  width: 100%;
  height: 160px;
  background: url("http://img3.tqcaifu.com/list/reseach2banner2.png") no-repeat 100% 100%;
}
.researchleft2 img{
  height: 110px;
  width: 110px;
  float: left;
}
.researchleft2 .msg1{
  width: 260px;
  float: left;
}
.researchleft2 .msg{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(114, 62, 62, 0.4);
}
.researchleft2 .msg1 h1{
  font-size: 22px;
  color: white;
  font-weight: bolder;
}
.researchleft2 .msg1 h2{
  font-size: 16px;
  color: white;
  margin-top: 10px;
}
</style>
